<template>
	<view class="page">
		<view class="page-flex-top">
			<scroll-view :scroll-x="true" :scroll-with-animation="true" class="nav">
				<view v-for="(item, index) in navList" :key="index"
					:class="{'nav-item':true,'active':current==(index)}" @click="navChange(index)">
					<text class="nav-item-text">{{item.name}}</text>
					<view class="nav-item-line"></view>
				</view>
			</scroll-view>
		</view>
		<view style="width: 100%;height: auto;" v-html="last_content">
		</view>

	</view>
</template>

<script>
	export default {
		name: "needs",
		data() {
			return {
				current:0,
				navList:[],
				last_content:"<p style='text-align: center;width:100%;padding-top: 30px;margin: 0 auto'>暂无内容</p>",
			}
		},
		onShow() {
			this.getUnitList();
		},


		methods: {
			//跳转
			navChange(index){
				this.current = index
				this.last_content = this.navList[index].content;

			},

			async getUnitList(){
				const res = await this.$api.getUnitInfo();
				if (res.data.level == 'success'){
					let allData = res.data.data;
					for(var i=0;i<allData.length;i++){
						let str = allData[i].content;
						str = str.replace(/<img[^>]*>/gi, function (match, capture) {
							return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, '')
						})
						str = str.replace(/\<img/gi, '<img style="max-width:100%;height:auto;width:auto" ');

						let aa = {
							id:allData[i].id,
							name:allData[i].name,
							content:str
						}

						this.navList.push(aa)
						if(i == 0){
							this.last_content = str
						}
					}

					console.log(this.navList)
				}
			}

		},

	}
</script>

<style scoped lang="scss">
	@import '~@/static/scss/mixin.scss';
	.nav{
	    @include flex(flex-start);
	    flex-direction: row;
	    margin: 0 30rpx 0 30rpx;
	    width: calc(100vw - 60rpx);
	    @include scrolling(scroll,hidden);
	    .nav-item{
	        padding: 0 26rpx;
	        height: 88rpx;
	        @include flex();
	        flex-direction: column;
	        display: inline-flex;
	        .nav-item-text{
	            color: #333333;
	            font-size: 34rpx;
	            line-height: 48rpx;
	            height: 48rpx;
	            font-weight: ceil(500);
	        }
	    }
	    .active{
	        .nav-item-text{
	            color: #3782FF;
	            font-size: 40rpx;
	            line-height: 56rpx;
	            height: 56rpx;
	            font-weight: ceil(600);
	            margin: 12rpx;
	        }
	        .nav-item-line{
	            width: 40%;
	            height: 8rpx;
	            background: #3782FF;
	            border-radius: 4rpx;
	        }
	    }
	}
</style>
